<template>
  <div>
    <div>
      <p class="city_top">
        <span @click="back">返回</span>
        <span>城市选择</span>
        <span></span>
      </p>
      <p class="city_center">
        <span class="churchuard" @click="churs" :class="{active:isShow==true}">境内</span>
        <span class="overseas" @click="overs" :class="{active:isShow==false}">境外·港澳台</span>
      </p>
      <p class="search">
        <input
          type="text"
          v-model="search_text"
          placeholder="输入你想搜索的城市名称"
         
          @input="searchs()"
        />
      </p>
    </div>
    <div class="search-content" v-show="!xs">
      <div v-for="(item,index) in searchlist" :key="index" @click="bbb(item)">{{item}}</div>
      <br />
    </div>
    <div v-show="xs">
      <Chur v-if="isShow"></Chur>
      <Over v-if="!isShow"></Over>
    </div>
  </div>
</template>
<script>
import Chur from "./Chur";
import Over from "./Over";
export default {
  data() {
    return {
      isShow: true,
      search_text: "",
      searchlist: [],
      good: [],
      xs: true,
    };
  },
  components: {
    Chur,
    Over,
  },
  mounted() {
    this.$axios.get("./static/api/city.json").then((res) => {
      // console.log(res.data.data.cities);
      this.good = res.data.data.cities;
    });
  },
  methods: {
    back() {
      return window.history.back();
    },
    churs() {
      this.isShow = true;
    },
    overs() {
      this.isShow = false;
    },

    bbb(item) {
      console.log(item);
      this.$router.push({
        path: "/",
        query: {
          name: item,
        },
      });
    },
    yyy(){
      if(this.search_text==''){
        this.xs=false

      }
    },
    searchs() {
      // console.log(this.search_text)
      // console.log(111);
      if(this.search_text==''){
        this.isShow=false
        
      }
      this.searchlist = [];
      let searchlist = this.searchlist;
      let search_text = this.search_text;
      let good = this.good;
      Object.keys(good).forEach(function (key) {
        let searchgood = [];
        searchgood.push(...good[key]);
        // console.log(good[key])
        // console.log(searchgood)
        searchgood.map((ele) => {
          // console.log(ele.name)
          // console.log(search_text);
          if (ele.name.includes(search_text)) {
            searchlist.push(ele.name);
            // console.log(this.searchlist)
          }
        });
      });
      this.xs = false;
      this.search_text = "";
    },
  },
};
</script>
<style lang="stylus"  scoped>
* {
  font-size: 15px;
}

.city_top {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 15px;
  background: #00BCD4;
  color: white;
}

.city_center {
  padding-bottom: 15px;
  background: #00BCD4;
}

.churchuard {
  border: 1px solid white;
  padding: 0px 65px 0px 65px;
  margin-left: 10%;
  color: white;
}

.overseas {
  border: 1px solid white;
  padding: 0px 45px 0px 45px;
  color: white;
}

.active {
  background: white;
  color: #00BCD4;
}

.search {
  width: 100%;
  height: 35px;
  background-color: #00BCD4;
}

.search input {
  margin-left: 40px;
  0;
  width: 80%;
  height: 25px;
  border-radius: 20px;
  border: 0px solid gray;
}

.search-content {
  width: 100%;
  height: 200px;
  border: 1px solid gray;
  position: fixed;
  top: 106px;
  background: white;
  z-index: 100;
  overflow: scroll;
}
</style>